<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="我的加油机"> </bar>
        <group>
            <mu-input label="安装地址" label-class="my-name" v-model="newValue" class="my-edit-name"></mu-input>
        </group>
        <div class="my-input">
            <x-button class="login-submit"  @click.native="onSave">保存</x-button>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import {
        lang
    } from 'muka'
    import {
        Bar,
        MInput,
    } from 'muka-ui'
    import {
        Group,
        XButton
    } from 'vux'
    export default {
        name: 'editName',
        components: {
            Bar,
            'mu-input': MInput,
            Group,
            XButton
        },
        created: function () {
            this.item = this.tankerList[this.$route.params.index]
            this.newValue = this.item.installAddr
        },
        data: function () {
            return {
                value: '',
                newValue: null,
            }
        },
        computed: mapState([
            VUEX_NAME.tankerList
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.uTanker
            ]),
            onSave: async function () {
                if (this.newValue === this.item.installAddr) {
                    this.$vux.toast.show({
                        text: '没有做任何更改',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$ajax(
                    'mch/editTanker',
                    {
                        tankerId: this.item.tankerId,
                        installAddr: this.newValue
                    },
                    (content) => {
                        this.item.installAddr = this.newValue
                        this.$router.back()
                    }, true)
            }
        }
    }

</script>
